<template>
  <div id="clinicAllApplication">
    <!-- 开始日期 -->
    <div class='duration' v-show='isDate' @click.stop='isDate=true'>
      <div class='top'>
        <a @click.stop='isDate=false'>取消</a>
        <a @click.stop='sureDate'>确定</a>
      </div>
      <mt-picker :slots="slotsDate" @change="onValuesChangeDate"></mt-picker>
    </div>
    <header>
      <i @click="goBack()"></i>
      <div>诊室椅位信息</div>
    </header>
    <div class="border-8"></div>
    <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="false">
      <ul class="list">
        <li>
          <b>
            我的椅位:
            <i>(黄色审核中，绿色审核成功，红色审核失败)</i>
          </b>
        </li>
        <div class='mc' v-if="list.length<1">
          <!-- <img src="../../image/no_collection@2x.png" width='110' alt=""> -->
          <p>暂无椅位信息!</p>
        </div>
        <li v-for="(item,index) in list">
          <a>
            <span>{{item.startdate}}</span>
            <span class="time" :class="item.status.substring(0,1) == '2'? 'success':item.status.substring(0,1) == '3'?'fail':''">{{item.am_starttime?item.am_starttime+'-'+item.am_endtime: '上午待定'}}</span>
            <span class="time" :class="item.status.substring(2) == '2'? 'success':item.status.substring(2) == '3'?'fail':''">{{item.pm_starttime?item.pm_starttime+'-'+item.pm_endtime : '下午待定'}}</span>
            <!-- <i :class="item.status=='申请成功'? 'active':''">{{item.status}}</i> -->
          </a>
        </li>
      </ul>
    </mt-loadmore>
    <div class='btn'>
      <a class="confirmBtn" @click="showMc = true">
        申请椅位开放
      </a>
    </div>
    <div class="mc2" v-show="showMc" @click.stop="toggle(0)">
      <ul @click.stop="showMc = true">
        <h3>开放时间申请</h3>
        <li @click='showToggle(0)'>
          <span>开始日期</span>
          <i>{{obj.startdate || '未选择'}}</i>
        </li>
        <li @click='showToggle(1)'>
          <span>开始时段</span>
          <i>{{obj.duration || '未选择'}}</i>
        </li>
        <li @click='showToggle(2)'>
          <span>开始时间</span>
          <i v-if="obj.duration == '上午'">{{obj.am_starttime || '未选择'}}</i>
          <i v-if="obj.duration == '下午'">{{obj.pm_starttime || '未选择'}}</i>

        </li>
        <li @click='showToggle(3)'>
          <span>结束时间</span>
          <i v-if="obj.duration == '上午'">{{obj.am_endtime ||'未选择'}}</i>
          <i v-if="obj.duration == '下午'">{{obj.pm_endtime ||'未选择'}}</i>
        </li>
        <li @click=''>
          <span>价钱</span>
          <input type="number" v-model="obj.price" style="border: 0px solid transparent;text-align: right;">
        </li>
        <li>
          <a @click.stop="subForm">提 交</a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        list: [],
        status: '', //用户点的哪个选择器 0 1 2 3
        sentPage: {
          page: 1, //分页累加
        }, //接口入参
        totalNum: 0, //总数据条数
        allLoaded: false, //分页数据是否已经加载完毕
        obj: {
          clinicid: localStorage.getItem("loginMobile"),
          startdate: '', //
          duration: '', //上午还是下午
          am_starttime: '',
          am_endtime: '',
          pm_starttime: '',
          pm_endtime: '',
          status: '',
          price: '',
        },
        // 日期 
        isDate: false, //是否显示选择器
        values: '', //选择但未确定时的选项
        slotsDate: [{
          values: function () {
            const date1 = new Date(); //获取当前时间
            const dayArr = []; //定义一个数组存储所以时间
            for (var i = 0; i < 16; i++) {
              const date2 = new Date(date1);
              date2.setDate(date1.getDate() + i);
              
              const month = date2.getMonth() + 1;
              const day = date2.getDate();
              var month1, day1;
              if (month < 10) {
                month1 = '0' + month
              } else {
                month1 = month
              }
              if (day < 10) {
                day1 = '0' + day
              } else {
                day1 = day
              }
              const times = date2.getFullYear() + "-" + month1 + "-" + day1;
              dayArr.push(times); //把未来几天的时间放到数组里
            }
            return dayArr;
          }(),
          className: 'slot1',
          textAlign: 'center',
          defaultIndex: 0,
          value: function () {
            const date1 = new Date(); //获取当前时间
            const date2 = new Date(date1);
            date2.setDate(date1.getDate());
            const month = date2.getMonth() + 1;
            const day = date2.getDate();
            var month1, day1;
            if (month < 10) {
              month1 = '0' + month
            } else {
              month1 = month
            }
            if (day < 10) {
              day1 = '0' + day
            } else {
              day1 = day
            }
            const times = date2.getFullYear() + "-" + month1 + "-" + day1;
            return times;
          }(),
        }, ],

        showMc: false, //是否显示提交申请表单 默认否
      }
    },
    components: {

    },
    methods: {
      // 控制选择器选项
      showToggle(i) {
        this.isDate = true;
        if (i == 0) {
          this.status = 0;
          this.slotsDate = [{
            values: function () {
              const date1 = new Date(); //获取当前时间
              const dayArr = []; //定义一个数组存储所以时间
              for (var i = 0; i < 16; i++) {
                const date2 = new Date(date1);
                date2.setDate(date1.getDate() + i);

                const month = date2.getMonth() + 1;
                const day = date2.getDate();
                var month1, day1;
                if (month < 10) {
                  month1 = '0' + month
                } else {
                  month1 = month
                }
                if (day < 10) {
                  day1 = '0' + day
                } else {
                  day1 = day
                }
                const times = date2.getFullYear() + "-" + month1 + "-" + day1;
                dayArr.push(times); //把未来几天的时间放到数组里
              }
              return dayArr;
            }(),
            className: 'slot1',
            textAlign: 'center',
            defaultIndex: 0,
            value: function () {
              const date1 = new Date(); //获取当前时间
              const date2 = new Date(date1);
              date2.setDate(date1.getDate());


              const month = date2.getMonth() + 1;
              const day = date2.getDate();
              var month1, day1;
              if (month < 10) {
                month1 = '0' + month
              } else {
                month1 = month
              }
              if (day < 10) {
                day1 = '0' + day
              } else {
                day1 = day
              }
              const times = date2.getFullYear() + "-" + month1 + "-" + day1;
              return times;
            }(),
          }]
        } else if (i == 1) {
          this.status = 1;
          this.slotsDate = [{
            values: ["上午", "下午"],
            className: 'slot',
            textAlign: 'center',
            defaultIndex: 0,
            value: '上午',
          }]
        } else if (i == 2) {
          this.status = 2;
          if (this.obj.duration == '上午') {
            this.slotsDate = [{
              values: function () {
                const hourArr = [];
                for (var i = 6; i < 13; i++) {
                  if (i < 10) {
                    hourArr.push('0' + i + ":00");
                  } else {
                    hourArr.push(i + ":00");
                  }

                }
                return hourArr;
              }(),
              className: 'slot',
              textAlign: 'center',
              defaultIndex: 0,
              value: '06:00',
            }, ]
          } else {
            this.slotsDate = [{
              values: function () {
                const hourArr = [];
                for (var i = 13; i < 20; i++) {
                  if (i < 10) {
                    hourArr.push('0' + i + ":00");
                  } else {
                    hourArr.push(i + ":00");
                  }

                }
                return hourArr;
              }(),
              className: 'slot',
              textAlign: 'center',
              defaultIndex: 0,
              value: '13:00',
            }, ]
          }

        } else if (i == 3) {
          this.status = 3;
          if (this.obj.duration == '上午') {
            this.slotsDate = [{
              values: function () {
                const hourArr = [];
                for (var i = 6; i < 13; i++) {
                  if (i < 10) {
                    hourArr.push('0' + i + ":00");
                  } else {
                    hourArr.push(i + ":00");
                  }

                }
                return hourArr;
              }(),
              className: 'slot',
              textAlign: 'center',
              defaultIndex: 0,
              value: '06:00',
            }, ]
          } else {
            this.slotsDate = [{
              values: function () {
                const hourArr = [];
                for (var i = 13; i < 20; i++) {
                  if (i < 10) {
                    hourArr.push('0' + i + ":00");
                  } else {
                    hourArr.push(i + ":00");
                  }

                }
                return hourArr;
              }(),
              className: 'slot',
              textAlign: 'center',
              defaultIndex: 0,
              value: '13:00',
            }, ]
          }
        }

      },
      toggle(status) {
        if (status == 0) {
          this.isDate = false;
          this.showMc = false;
        }
      },
      goBack() {
        this.$router.back();
      },
      // 提交共享信息申请
      subForm() {
        if (!this.obj.startdate) {
          this.$utils._toast("请选择开始日期");
          return false;
        } else if (!this.obj.duration) {
          this.$utils._toast("请选择上午/下午");
          return false;
        } else if (!(this.obj.am_starttime || this.obj.pm_starttime)) {
          this.$utils._toast("请选择开始时间");
          return false;
        } else if (!(this.obj.am_endtime || this.obj.pm_endtime)) {
          this.$utils._toast("请选择结束时间");
          return false;
        } else if (!this.obj.price) {
          this.$utils._toast("请填写该时段的价格");
          return false;
        } else {
          if (this.obj.am_starttime) {
            this.obj.status = "1:0";
          } else if (this.obj.pm_starttime) {
            this.obj.status = "0:1";
          }
          this.$api.post(this.$api.baseURLSchool, "updatedata/share_time/add", this.obj, r => {
            if (r.data.ret == 1) {
              this.$utils._toast("提交成功");
              this.sentPage.page = 1;
              this.getList(this.sentPage);
            }
          }, err => {
            console.log(err);
          })
        }
        this.toggle(0);
      },

      //开始日期
      onValuesChangeDate(picker, values) {
        this.values = values[0];
      },
      //
      sureDate() {
        switch (this.status) {
          case 0:
            this.obj.startdate = this.values;
            break;
          case 1:
            this.obj.duration = this.values;
            break;
          case 2:
            switch (this.obj.duration) {
              case '上午':
                this.obj.am_starttime = this.values;
                break;
              case '下午':
                this.obj.pm_starttime = this.values;
                break;
              case '':
                this.$utils._toast("请选择上下午");
                break;
            }
            break;
          case 3:
            switch (this.obj.duration) {
              case '上午':
                this.obj.am_endtime = this.values;
                break;
              case '下午':
                this.obj.pm_endtime = this.values;
                break;
            }
            break;
        }
        this.isDate = false;
      },

      // 获取列表
      getList(params) {
        this.allLoaded = false;
        this.userid = localStorage.getItem("loginMobile");
        this.$api.post(this.$api.baseURLSchool, "selecttype_view/share_time/0?clinicid=" + this.obj.clinicid, params, r => {
          this.totalNum = r.data.records; //总数据
          if (this.sentPage.page == 1) {
            this.list = r.data.rows;
          } else {
            this.list = this.list.concat(r.data.rows);
          }
          if (r.data.rows.length == 0 && this.sentPage.page > 1) {
            this.$utils._toast("暂无更多数据");
          }
          if (this.totalNum == this.list.length) {
            this.allLoaded = true;
          }

        }, err => {
          console.log(err);
        })
      },
      //上拉加载
      loadBottom() {
        (this.sentPage.page) ++;
        setTimeout(() => {
          this.getList(this.sentPage);
        }, 20);
        if (this.totalNum == this.list.length) {
          this.allLoaded = true;
        }
        this.$refs.loadmore.onBottomLoaded();
      }

    },
    created() {
      this.getList(this.sentPage);
    },
    mounted() {}
  }

</script>
<style lang="scss" scoped>
  .mc {
    padding-top: 40px;
    img {
      display: block;
      margin: 0 auto;
    }
    p {
      padding-top: 10px;
      text-align: center;
    }
  }

</style>
